<template>
	<view>
	  <view class="head">
	    <view class="select-bottom">
	      <input placeholder="请输入要搜索的订单号" class="head-input" v-model="searchValue.value"></input>
	      <button class="head-button" type="primary" style="width:180rpx; margin-left:12rpx; height: 72rpx;" @click="clickSearch">搜索</button>
	    </view>
	  </view>
	  <scroll-view 
	  :style="'height:' + scrollViewHeight+'px'" 
	  scroll-y="true" 
	  @scrolltolower="lower" 
	  scroll-into-view="toView" 
	  scroll-top="scrollTop" 
	  enable-back-to-top="true"
	  class="scroll-view">
	          <view class="scroll-view-item table-total">
	            <view>总订单数:{{data.total.order_num}}</view>
	            <view v-if="option.source == 1">总金额:{{data.total.money == null ?'0':data.total.money}}</view>
	            <view v-else></view>
	          </view>
	          <view class="scroll-view-item table-head">
	            <view>订单编号</view>
	            <view>{{tableLine.oneLineTitle}}</view>
	            <view>{{tableLine.twoLineTitle}}</view>
	          </view>
	          <view class="scroll-view-item" v-for="(item) in data.info" :data-sn="item.order_sn" @click="itemTap" :key="item.order_sn">
	            <view><text>{{item.order_sn}}</text></view>
	            <view v-if="option.source == 1">{{item.refund_type}}</view>
	            <view v-else>{{item.send_goods_type}}</view>
	            <view v-if="option.source == 1"><text>¥{{item.money}}</text></view>  
	            <view v-else><text>{{item.kuaidi}}</text></view>
	          </view>
	        </scroll-view>
	</view>

</template>

<script>
	import {isEmpty} from "../../../utils/string.js"
	import {EPlatform} from '@/utils/EPlatform.js';
	import {isH5, Platform} from '@/utils/Platform.js'
	
	export default {
		data() {
			return {
				scrollViewHeight: 0,
				searchValue: {
				  value: ''
				},
				option: {},
				data: {
					total:{}
				},
				tableLine:{
				  oneLineTitle: '',
				  twoLineTitle: ''
				},
				paging:{
				  page: 1,
				  pagSize: 20
				}
			}
		},
		onLoad (options) {
			this.option = options
		
		    this.getTableLineTitle()
		    
		    this.getAfterSaleDetail()
		    this.changedNaviTitle()
		
		  },
		  mounted() {
		  	this.calcScrollViewHeight()
		  },
		methods: {
			lower(e) {
			    if (this.paging.page < this.data.total.page_num){
			      this.paging.page ++
			      this.getAfterSaleDetail()
			    } else{
			      uni.showToast({
			        title: '没有更多了',
			      })
			    }
			  },
			
			  itemTap(e){
			    let type  = this.option.type==1 ? 2 : 1
			    let orderSn = e.currentTarget.dataset.sn
			    uni.navigateTo({
			      url: '../../sale/details/details' + '?type=' + type + '&orderSn=' + orderSn,
			    })
			  },
			
			  clickSearch (){
			    this.paging.page = 1
			    this.getAfterSaleDetail()
			  },
						
			  calcScrollViewHeight(){
			
			    //设置scroll-view高度
				
				if (false && isH5) {
					setTimeout(()=>{
						// let h = document.querySelector('.head')
						// 	console.log("hh"+h)
						// 	console.log("document"+document)
						// 	this.scrollViewHeight = this.$store.getters.windowHeight - document.querySelector('.head').offsetHeight - 20
						// 	console.log("scrollViewHeight"+this.scrollViewHeight)
					},200)
				} else {
					let query = uni.createSelectorQuery();
					query.select('.head').boundingClientRect();
					query.exec((rect) => {
					  console.log(rect)
					  let height = this.$store.getters.windowHeight - rect[0].height - 20;
					  this.scrollViewHeight = height
					})
				}
			  },
			
			  getTableLineTitle () {
			    var tb = {}
			    if (this.option.source == 1){//售后
			      tb = {
			        oneLineTitle: '售后类型',
			        twoLineTitle: '金额'
			      }
			    }else{
			      tb = {
			        oneLineTitle: '发货类型',
			        twoLineTitle: '快递单号'
			      }
			    }
				this.tableLine = tb
			  },
			
			  changedNaviTitle () {
			    var typeName = this.option.type == 1 ? '预售' : '零售'
			    var source = this.option.source == 1 ? '售后' : '发货'
				uni.setNavigationBarTitle({
				  title:typeName + source + '详情'
				})
			  },
			
			  getAfterSaleDetail () {
			
			
			    var schoolId = this.$store.getters.currentSchool.school_id
			    let proi 
				let params = {
			        school_id: schoolId,
			        order_type: this.option.type,
			        key_word: this.searchValue.value ? this.searchValue.value : '',
			        page: this.paging.page,
			        page_size: this.paging.pagSize,
					refund_type:this.option.refund_type,
					sizeorder_id:this.option.order_id,
					booking_id:this.option.booking_id,
					time_year:this.option.year,
					time_month:this.option.month
			      }
				
				if(this.option.source==1){
					proi = this.$api.getSizeOrderRefundDetail(params)
				}else{
					proi = this.$api.getSendOutGoodsDetail(params)
				}
				
				proi.then((rep) => {
					let {data} = rep.data
					if (this.paging.page == 1){
					  let temp = data.info
					  console.log(temp)
					  temp.map((v) => {
					    if(v.hasOwnProperty("send_goods_type"))
						if(isEmpty(v.send_goods_type))
							v.send_goods_type = "未知"
					  })
					  this.data = data
					}else{
					  var orders = this.data.info;
					  var os = orders.concat(data.info)
					  os.map((v) => {
					    if(v.hasOwnProperty("send_goods_type"))
					    if(isEmpty(v.send_goods_type)){
							v.send_goods_type = "未知"
					    }
					  })
					  this.data.info = os
					}
				})
				
			  }
		}
	}
</script>

<style lang="scss">
page, page > view:nth-child(1){
  height: 100%;
  overflow: hidden;
}

.select-bottom{
  display: flex;
  justify-content: center
}

.input-bottom{
  display: flex;
  justify-content: space-between;
  margin-top: 10rpx;
}
.head-input{
  border: 1rpx solid #ddd;
  border-radius: 5rpx;
  width: 72%;
  height: 72rpx;
  padding-left: 8rpx;
  font-size: 14px;
}
.head-button{
  line-height: 72rpx;
  font-size: 14px;
  font-weight: 0;
  padding: 0px;
}

page > view:nth-child(1){
  margin-top: 8rpx;
  margin-left: 8rpx;
  margin-right: 8rpx;
}

scroll-view{
  border-right: 1px solid #ddd;
  margin-top: 16rpx;
}

.scroll-view-item{
  height: 80rpx;
  display: flex;
  font-size: 14px;
}

.scroll-view-item > view:nth-child(1){
  width: 50%;
  align-items: center;
  display: flex;
  justify-content: center;
  overflow: hidden;
  border-bottom: 1px solid #ddd;
  border-left: 1px solid #ddd;
}

.scroll-view-item > view:nth-child(1) > text, .scroll-view-item > view:last-child > text{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.scroll-view-item > view:nth-child(n+2){
  width: 25%;
  align-items: center;
  display: flex;
  justify-content: center;
  border-bottom: 1px solid #ddd;
  border-left: 1px solid #ddd;
}

.scroll-view-item > view:nth-child(n+3){
  border-right: 1px solid #ddd;
}

.table-total{
  height: 100rpx;
  font-size: 16px;
  font-weight: bold;
}

.table-total > view:nth-child(1){
  border-left: none;
  border-left: 1px solid #ddd;
  border-top: 1px solid #ddd;
}

.table-total > view:nth-child(n+2){
  width: 50%;
  align-items: center;
  display: flex;
  justify-content: center;
  border-top: 1px solid #ddd;
  border-left: none !important;
}

.table-total > view:last-child{
  border-right: 1px solid #ddd !important;
}

.table-head{
  background-color: #e1e1e1;
  font-size: 14px;
}
.head{}


</style>
